<template>
	<!-- 输入搜索内容页面 -->
	<view>
		<!-- 自定义导航栏 -->
		<!-- :isBack="ture显示左侧返回按钮" :isRightBtn="true"显示右侧设置按钮 -->
		<search-navtab :isBack="true" :isRightBtn="true" @click="favoritesPopup = true" @rightBtn="openMask">
			<template slot="left-btn">
				<u-tag :text="selectValue" plain size="large" @click="show = true"></u-tag>
				<!-- <text class="cuIcon-unfold" /> -->
			</template>
			<template slot="title">
				<u-search :showAction="false" placeholder="请输入搜索内容" v-model="inputValue" @clear="clearText" @search="gotoSearchDetail" @custom="gotoSearchDetail"></u-search>
				<!-- <text class="cuIcon-unfold" /> -->
			</template>
			<template slot="right-btn">
				<text>取消</text>
				<!-- <text class="cuIcon-roundadd" /> -->
			</template>
		</search-navtab>
		<!-- 媒体类型为空的弹框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择类型
				selectValue:"请选择",
				// 输入的搜索内容
				inputValue:''
			};
		},
		onLoad(opptions) {
			console.log('获取来自搜索tab页面的类型',opptions);
			if(opptions.selectValue !='') {
				this.selectValue = opptions.selectValue
			}
			
		},
		methods:{
			// 取消返回上一页
			openMask() {
				uni.navigateBack()
			},
			// 清除文本
			clearText() {
				console.log('清除文本');
				this.inputValue = ''
			},
			// 跳转到搜索详情
			gotoSearchDetail() {
				console.log('跳转到搜索详情页面');
				//----判断是否为空或者空格---
				if (this.inputValue.replace(/(^\s*)|(\s*$)/g, "") == "") {  
					 console.log('未输入或者输入为空格')
					 this.$refs.uToast.show({
					 	message: "当前没有输入内容",
					 	type: 'error'
					 });
				} else {
				    console.log('输入：', this.inputValue)
					// 携带参数跳转到搜索详情页
					uni.navigateTo({
						url:'/user/searchDetail/searchDetail?selectValue=' + this.selectValue +'&inputValue=' + this.inputValue
					})
				};
			}
		}
	}
</script>

<style lang="scss" scoped>

.search-title {
	display: flex;
}
</style>
